<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue2.6.10.js"></script>
	</head>
	<body>
		<div id="app">

			<input type="text" v-model="n1">

			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>

			<input type="text" v-model="n2">

			<input type="button" value="=" @click="calc">

			<input type="text" v-model="result">

		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data() {
				return {
					n1: 0,
					n2: 0,
					result: 0,
					opt: "+"
				}
			},
			methods: {
				calc() { //算数的方法
					//逻辑:
					// switch (this.opt) {
					// 	case "+":
					// 		this.result = parseInt(this.n1) + parseInt(this.n2)
					// 		break;
					// 	case "-":
					// 		this.result = parseInt(this.n1) - parseInt(this.n2)
					// 		break;
					// 	case "*":
					// 		this.result = parseInt(this.n1) * parseInt(this.n2)
					// 		break;
					// 	case "/":
					// 		this.result = parseInt(this.n1) / parseInt(this.n2)
					// 		break;
					// }
					var codeStr =  'parseInt(this.n1) '+this.opt+'parseInt(this.n2)'
					this.result = eval(codeStr)
				}
			},
		})
	</script>
</html>
